<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="/map/css/map.css"/>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=a678b6c21eb9b7a32be8f4c556f0c66715235c29"></script>
<script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/map/js/map_main.js"></script>
<script type="text/javascript" defer="defer">


	window.onload = function(){
		var position = new daum.maps.LatLng(37.55679487097759, 126.92383296373369); 
		map = new daum.maps.Map(document.getElementById('map'), {
			center: position, 
			level: 4, 
			mapTypeId: daum.maps.MapTypeId.ROADMAP 
		});
		var zoomControl = new daum.maps.ZoomControl();
		map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
		var mapTypeControl = new daum.maps.MapTypeControl();
		map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
	
		daum.maps.event.addListener(map, "click", function(MouseEvent){
			var latLng = MouseEvent.latLng;
			var latitude = latLng.getLat();
			var longitude = latLng.getLng();
	
			if(mark != null)
				mark.setVisible(false);
			mark = new daum.maps.Marker({
				position : new daum.maps.LatLng(latitude, longitude) 
			});
	
			if(marker != null)
				marker.setVisible(false);
			
			mark.setMap(map);
			
			if(confirm("클릭하신 곳을 중심으로 지정하시겠습니까?")){
				document.mapFrm.latitude.value = latitude;
				document.mapFrm.longitude.value = longitude;
				alert("다음 단계로 넘어 가시려면 '다음'을 눌러주십시오.");
			}else{
				mark.setVisible(false);
	
				var lat = document.getElementById("latitude").value;
				var lng = document.getElementById("longitude").value;
	
				var po;
				if(lat == "" || lng == ""){
					po = new daum.maps.LatLng(37.537123, 127.005523);
				}
				else{
					po = new daum.maps.LatLng(lat, lng);
					mark = new daum.maps.Marker({
						position : po 
					});
					mark.setMap(map); 
				}
				map.setCenter(po);
				return;
			}
		});	
	};
	
	function gotoNextStep(){
		if(document.getElementById("latitude").value == "" ||
		   document.getElementById("longitude").value == ""){
			alert("위치를 선택해 주십시오.");
			return;
		}
		document.mapFrm.submit();
	}
		
</script>
<body>
<form action="map_step2.jsp" method="post" name="mapFrm" onsubmit="return false;">
<input type="hidden" id="latitude" name="latitude" value=""/>
<input type="hidden" id="longitude" name="longitude" value=""/>
<div id="wrap">
	<div id="header"><div class="mapText">약도 만들기- 위치선택 (1/3)</div></div>
	<div id="body">
		<div id="search">
			<div id="searchTop">
				<div id="searchFrm"><input type="text" id="q" value="주소검색" class="inputBox" onfocus="javascript:setInputLayout('q');" onkeydown="javascript:if(event.keyCode == 13) searchPosition('q');"/></div>
				<div id="searchBtn"><a href="javascript:searchPosition('q');"><img src="/common/images/btn_search.gif"/></a></div>
			</div>
			
			<div id="searchBody">
				<div id="searchList">
					<div id="searchResultH" class="underLine">위치 선택 법</div>
					<div id="searchResultB">원하는 장소를 검색한후, 해당위치를 클릭하세요.</div>
				</div>
			</div>
		</div>
		<div id="mapView">
			<div id="mapHeader"><span class="boldHeaderFont">1단계:: 위치선택</span></div>
			<div id="mapPanel">
				<div id="map"></div>
			</div>
		</div>
	</div>
	<div id='footer'>
		<div id="nextBtn"><a href="javascript:gotoNextStep();"><img src="/common/images/btn_next.gif"/></a></div>
		<%--
		<div id="closeBtn"><a href="javascript:self.close();"><img src="img/btn_close.gif"/></a></div>
		 --%>
	</div>
</div>

</form>
</body>
